<template>
  <div class="uploadExcel">
    <span><span class="important">*</span>文件：</span>
    <div class="img-wrapper" @click="uploadHandle" v-show="!fileName">
      <i class="el-icon-plus icon" ></i>
      <!-- <el-progress  :percentage="percentage" class="progress" v-show="percentShow"></el-progress> -->
      <div class="shade"></div>
      <input type="file" ref="inputfile" @change="fileChangeHandle" style="display: none;">
    </div>
    <span>{{fileName}}</span>
    <div style="padding:0 20px;">
        <el-button type="primary" v-show="uploadBtnShow"  @click="uploadFile"  :loading="loadingShow">{{loadingShow?'上传中':'上传'}}<i class="el-icon-upload el-icon--right"></i></el-button>
        <el-button type="primary"  @click='reset'>重置</el-button>
    </div>
   
  </div>
    
</template>

<script>
  import * as qiniu from 'qiniu-js'
  import api from '@/api/apiPath'
  import Util from '../../../common/utils'
  export default {
    name: "upload-file",
    data () {
      return {
        // percentage: 0,
        loadingShow: false,
        uploadBtnShow:false,
        fileName:'',
      }
    },
    props: ['value','fileType','apiPath','fileSize',],
    created () {
     
    },
    watch: {
      value (val) {
        this.excelUrl = val
      }
    },
    methods: {
      uploadHandle () {
        const node = this.$refs.inputfile
        node.click()
      },
      //上传
      uploadFile(){
        const file = this.$refs.inputfile.files[0];
        if(!file) {
            this.uploadHandle();
            return;
        }
        let params = new FormData();
        params.append('file', file)
        this.loadingShow = true;
        
     
        //return ;
        this.axios.post(api[this.apiPath], params).then(res => {
          if(res.data.code == 200){
             this.loadingShow = false;
             this.uploadBtnShow = false;
             this.$message({
                      type: 'success',
                      message: '导入成功',
                  });
             this.$emit('uploadSuccess',res.data.data)
          }
           
        }).catch(err=>{
            console.log(err)
            this.reset();
        })
      },
      fileChangeHandle () {
        const file = this.$refs.inputfile.files[0]
        // 判断文件类型
        const upType = this.fileType;
        const fileName = file.name;
        const postfix = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length)
        const fileSize = (file.size / 1024).toFixed(0); 
        const maxNun = (this.fileSize / 1024).toFixed(0); 
        if (!upType.includes(postfix)) {
            this.$alert('只支持xls xlsx格式的文件', '提示', {
                    type: 'error',
                    confirmButtonText: '确定',
                    callback: action => {
                        }
            });
          return false
        }
        if(fileSize>this.fileSize){
          this.$alert(`上传文件不能大于${maxNun}MB`, '提示', {
                    type: 'error',
                    confirmButtonText: '确定',
                    callback: action => {
                        }
            });
            return false
        }
        this.uploadBtnShow = true;
        this.fileName = fileName;
      },
      reset(){
          this.fileName = '';
          this.$refs.inputfile.value = '';
          this.loadingShow = false;
          this.uploadBtnShow = false;
          
      }
    }
  }
</script>

<style lang="stylus">
  .important{
      color: #f56c6c;
      margin-right: 4px;
  }
  .uploadExcel{
      display :flex;
      align-items: center;
      padding:20px 0;
    .img-wrapper{
      position: relative;
      width: 240px;
      height: 40px;
      background-color: #fbfdff;
      border: 1px dashed #c0ccda;
      border-radius: 6px;
      box-sizing: border-box;
      cursor: pointer;
      overflow: hidden;
      &:hover{
        border-color: #409eff;
        color: #409eff;
        .shade{
          display: block;
        }
        .icon{
          color: #fff;
          z-index: 9;
        }
      }
      .shade{
        position: absolute;
        display: none;
        background: rgba(0,0,0,0.5);
        left: 0;
        top: 0;
        right:0;
        bottom: 0;
      }
      .icon{
        font-size: 26px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .imgNode{
        width: 148px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
      .progress{
        margin-top: 10px;
        margin-left: 10px;
      }
    }
  }
</style>
